<template>
  <BasicDrawer v-bind="$attrs"
               @register="registerDrawer"
               showFooter
               :title="getTitle"
               width="500px"
               @ok="handleSubmit">
    <BasicForm @register="registerForm">
      <template #menu="{ model, field }">
        <BasicTree v-model:value="model[field]"
                   :treeData="treeData"
                   :fieldNames="{ title: 'menuName', key: 'id' }"
                   checkable
                   toolbar
                   title="菜单分配" />
      </template>
    </BasicForm>
  </BasicDrawer>
</template>
<script lang="ts">
import { defineComponent, ref, computed, unref } from 'vue'
import { BasicForm, useForm } from '/@/components/Form/index'
import { formSchema, addSysLog, editSysLog } from './data'
import { BasicDrawer, useDrawerInner } from '/@/components/Drawer'
import { BasicTree, TreeItem } from '/@/components/Tree'

export default defineComponent({
	name: 'RoleDrawer',
	components: { BasicDrawer, BasicForm, BasicTree },
	emits: ['success', 'register'],
	setup(_, { emit }) {
		const isUpdate = ref(true)
		const treeData = ref<TreeItem[]>([])

		const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
			labelWidth: 90,
			schemas: formSchema,
			showActionButtonGroup: false
		})

		const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
			resetFields()
			setDrawerProps({ confirmLoading: false })
			isUpdate.value = !!data?.isUpdate

			if (unref(isUpdate)) {
				setFieldsValue({
					...data.record
				})
			}
		})

		const getTitle = computed(() => (!unref(isUpdate) ? '新增' : '编辑'))

		async function handleSubmit() {
			try {
				const values = await validate()
				setDrawerProps({ confirmLoading: true })
				// TODO custom api
				console.log(values)

				if (!unref(isUpdate)) {
					await addSysLog(values)
				} else {
					await editSysLog(values)
				}

				closeDrawer()
				emit('success')
			} finally {
				setDrawerProps({ confirmLoading: false })
			}
		}

		return {
			registerDrawer,
			registerForm,
			getTitle,
			handleSubmit,
			treeData
		}
	}
})
</script>
